<template>
	<view>
		<view class="mask" @click="close_mask()" @touchmove.stop.prevent="moveHandle" v-show="showMask"></view>
		<view class="page_pop" :class="showMask?'active':''">
			<view class='close_pop' @click="close_mask()"><image class='close' src='/static/icon6.png'></image></view>
			<view class='page'>
				<view class='title'>{{title}}</view>
				<!-- 一级 -->
				<picker-view class='picker_view' :indicator-style="viewStyle" @change="picker_change" :value="value" v-if="showIndex==1">
					<picker-view-column>
						<view class="picker-item" :class="value[0]==index ?'active':''" v-for="(item,index) in pickers" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
				<!-- 二级 -->
				<picker-view class='picker_view' :indicator-style="viewStyle" @change="picker_change" :value="value" v-else-if="showIndex==2">
					<picker-view-column>
						<view class="picker-item" :class="value[0]==index ?'active':''" v-for="(item,index) in pickers[0]" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" :class="value[1]==index ?'active':''" v-for="(item,index) in pickers[1]" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
				<!-- 三级 -->
				<picker-view class='picker_view' :indicator-style="viewStyle" @change="picker_change" :value="value" v-if="time && showIndex==3">
					<picker-view-column>
						<view class="picker-item" :class="value[0]==index ?'active':''" v-for="(item,index) in times[0]" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" :class="value[1]==index ?'active':''" v-for="(item,index) in times[1]" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" :class="value[2]==index ?'active':''" v-for="(item,index) in times[2]" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>	
				<!-- 时间2级 -->
				<picker-view class='picker_view' :indicator-style="viewStyle" @change="picker_change" :value="value" v-if="times && showIndex==4">
					<picker-view-column>
						<view class="picker-item" :class="value[0]==index ?'active':''" v-for="(item,index) in times[0]" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" :class="value[1]==index ?'active':''" v-for="(item,index) in times[1]" :key="index">{{item}}</view>
					</picker-view-column>
					<!-- <picker-view-column>
						<view class="picker-item" :class="value[2]==index ?'active':''" v-for="(item,index) in times[2]" :key="index">{{item}}</view>
					</picker-view-column> -->
				</picker-view>	
				
				<!-- 三级 -->
				<picker-view v-if="address && showIndex==3" class='picker_view' :indicator-style="viewStyle" @change="picker_change" :value="value">
					<picker-view-column>
						<view class="picker-item" :class="value[0]==index ?'active':''" v-for="(item,index) in provinceData" :key="index">{{item.shortName}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" :class="value[1]==index ?'active':''" v-for="(item,index) in cityData" :key="index">{{item.shortName}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" :class="value[2]==index ?'active':''" v-for="(item,index) in areaData" :key="index">{{item.shortName}}</view>
					</picker-view-column>
				</picker-view>
				<view class="confirm_btn" @click='confirm_value()'>确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_province_list,
		get_city_list,
		get_area_list
	} from "../api/config.js"
	import other from "../utils/other.js"
	export default{
		props: {
		    showMask: {
		        type: Boolean,
				default:false
			},
			showIndex: {
				type: [Number,String],
				default:1
			},
			address:{
				type:Boolean,
				default:false
			},
			addressCode:{
				type: Array,
				default:()=>{
					return []
				}
			},
			time:{
				type:Boolean,
				default:false
			},
			title: {
				type: String
			},
			pickers: {
				type: Array,
				default:()=>{
					return []
				}
			},
			value: {
				type: Array,
				default:()=>{
					return []
				}
			}
		},
		data() {
			return {
				provinceData:[],
				cityData:[],
				areaData:[],
				provinceCode:null,
				cityCode:null,
				areaCode:null,
				times: [],
				viewStyle: `height: 50px;line-height: 50px;border-top:1px solid rgba(66,71,82,0.1);border-bottom:1px solid rgba(66,71,82,0.1);box-sizing:border-box;`
			};
		},
		watch:{
			address(val){
				if(val&&this.addressCode.length<1){
					this.getAddress()
				}
			},
			addressCode(val){
				if(val){
					this.preview()
				}
			},
			time(val){
				if(val){
					this.times=other.dateTimePicker(1900,2020).dateTimeArray;
					// console.log(this.times)
				}
			}
		},
		methods:{
			// 关闭选择框
			close_mask(){
				this.$emit("closeMask")
			},
			// 选择
			async picker_change(e){
				const vlaue = e.detail.value
				if(this.address){
					this.vlaue = [vlaue[0],0,0]
					this.provinceCode=this.provinceData[vlaue[0]].provinceCode
					await this.getCity()
					this.cityCode=this.cityData[vlaue[1]]?this.cityData[vlaue[1]].cityCode:''
					await this.cityCode && this.getArea()
				}
				if(this.time){
					this.times[2] = other.getMonthDay(this.times[0][vlaue[0]], this.times[1][vlaue[1]])
				}
				this.$emit("pickerChange",vlaue)
			},
			// 确认
			confirm_value(){
				if(this.address){
					const arr = [
						this.provinceData[this.value[0]],
						this.cityData[this.value[1]],
						this.areaData[this.value[2]],
					]
					this.$emit("confirmValue",arr);
				}else if(this.time){
					const arr = [
						this.times[0][this.value[0]],
						this.times[1][this.value[1]],
						this.times[2][this.value[2]],
					]
					this.$emit("confirmValue",arr);
				}else{
					this.$emit("confirmValue");
				}
				
			},
			// 禁止触摸穿透
			moveHandle(){},
			async getAddress(){
				await this.getProvince()
				this.provinceCode = this.provinceData[0].provinceCode
				await this.getCity()
				this.cityCode = this.cityData[0].cityCode
				await this.getArea()
			},
			async getProvince(){
				const province = await get_province_list()
				const data = province.data.data
				const provinceArr = data.map(i=>{
					return {
						shortName:i.provinceName,
						provinceCode:i.provinceCode,
					}
				})
				this.provinceData = provinceArr
			},
			async getCity(){
				const city = await get_city_list({
					 pid: this.provinceCode
				})
				const cityData = city.data.data
				const cityArr = cityData.map(i=>{
					return {
						shortName:i.cityName,
						cityCode:i.cityCode,
					}
				})
				this.cityData = cityArr
			},
			async getArea(){
				const area = await get_area_list({
					 pid: this.cityCode
				})
				const areaData = area.data.data
				const areaArr = areaData.map(i=>{
					return {
						shortName:i.areaName,
						areaCode:i.areaCode,
					}
				})
				this.areaData = areaArr
			},
			async preview(){
				await this.getProvince()
				const provinceCodeList = this.provinceData.map(i=>{
					return i.provinceCode
				})
				const provinceIndex = provinceCodeList.indexOf(this.addressCode[0])
				this.provinceCode=this.addressCode[0]
				await this.getCity()
				const cityCodeList = this.cityData.map(i=>{
					return i.cityCode
				})
				const cityIndex = cityCodeList.indexOf(this.addressCode[1])				
				this.cityCode=this.addressCode[1]
				await this.getArea()
				const areaCodeList = this.areaData.map(i=>{
					return i.areaCode
				})
				const areaIndex = areaCodeList.indexOf(this.addressCode[2])
				this.$emit('preview',[provinceIndex,cityIndex,areaIndex])
			}
		}
	}
</script>

<style lang="scss">
	.page_pop{
		position: fixed;
		bottom:-100%;
		left: 0;
		width: 100%;
		background: #fff;
		transition: all 0.4s;
		z-index:992;
		box-sizing: border-box;
		border-radius: 32rpx 32rpx 0 0;
		.close_pop{
			width: 72rpx;
			height: 72rpx;
			margin: auto;
			.close{
				width: 100%;
				height: 100%;
			}
		}
		.page{
			padding: 0 32rpx 32rpx 32rpx;
			.title{
				text-align: left;
				height:50rpx;
				font-size:36rpx;
				font-weight:600;
				line-height:50rpx;
				color:rgba(66,71,82,1);
				padding-bottom: 24rpx;
				margin-bottom: 32rpx;
				border-bottom: 2rpx solid #F7F9FB;
			}
			.picker_view{
				width: 100%;
				height: 40vh;
				.picker-item{
					/* #ifdef MP-WEIXIN */
					height: 50px !important;
					/* #endif */
					line-height: 50px;
					text-align: center;
					font-size: 36rpx;
					color: #9598A3;
					font-weight: 400;
				}
				.active{
					color: #5B90FF;
					font-weight: 600;
				}
			}
			.confirm_btn{
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 16rpx;
				text-align: center;
				color: #fff;
				font-size:36rpx;
				font-weight:600;
				letter-spacing:20rpx;
				background: #5B90FF;
			}
		}
	}
	.active{
	  bottom: 0;
	}
</style>
